<template>
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th class="frozen-col">发出时间(出库日期)</th>
          <th class="frozen-col">来料单位</th>
          <th class="frozen-col">生产计划单</th>
          <th class="frozen-col">产品</th>
          <th class="frozen-col">单号</th>
          <th>投料批次</th>
          <th>性能</th>
          <th>镀层</th>
          <th>产品规格</th>
          <th>产品工程师</th>
          <th>计划交期</th>
          <th>要求交期</th>
          <th>数量</th>
          <th>产品单重(kg)</th>
          <th>发料重量(kg)</th>
          <th>单位</th>
          <th>委托任务</th>
          <th>状态</th>
          <th>是否检包</th>
          <th>物料接收时间</th>
          <th>预测发货时间</th>
          <th>电镀产出计划</th>
          <th>物料实际发出时间</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td class="frozen-col">{{ item.FachuTime }}</td>
          <td class="frozen-col">{{ item.LLDanWei }}</td>
          <td class="frozen-col">{{ item.OrderPlan }}</td>
          <td class="frozen-col">{{ item.product }}</td>
          <td class="frozen-col">{{ item.Lot }}</td>
          <td>{{ item.TlLot }}</td>
          <td>{{ item.XNeng }}</td>
          <td>{{ item.DuCeng }}</td>
          <td>{{ item.ProductGre }}</td>
          <td>{{ item.ProgPartner }}</td>
          <td>{{ item.PlanDate }}</td>
          <td>{{ item.ReqDate }}</td>
          <td>{{ item.Qty }}</td>
          <td>{{ item.PerWeight }}</td>
          <td>{{ item.SendQty }}</td>
          <td>{{ item.Unit }}</td>
          <td>{{ item.OrderWT }}</td>
          <td>{{ item.Statues }}</td>
          <td>{{ item.IsJB }}</td>
          <td>{{ item.AcptTimeSD }}</td>
          <td>{{ item.PredictDeliveryTime }}</td>
          <td>{{ item.ElecOutputPlan }}</td>
          <td>{{ item.MateIssTime }}</td>
          <td>{{ item.remark }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "CustomTableComponent",
  data() {
    return {
      tableData: [
        {
          FachuTime: "2025-09-10",
          LLDanWei: "供应商A",
          OrderPlan: "计划001",
          product: "产品X",
          Lot: "单号001",
          TlLot: "批次1",
          XNeng: "性能A",
          DuCeng: "镀层甲",
          ProductGre: "牌号1",
          ProgPartner: "牌号1",
          PlanDate: "牌号1",
          ReqDate: "牌号1",
          Qty: "规格A",
          SendQty: 100,
          Unit: 2.5,
          OrderWT: 250,
          Statues: "个",
          IsJB: "任务1",
          status: "进行中",
          AcptTimeSD: "是",
          PredictDeliveryTime: "2025-09-08",
          ElecOutputPlan: "山东计划内容",
          MateIssTime: "山东计划内容",
          remark: "无",
        }
      ],
    };
  },
  computed: {
    // 可根据需要添加计算属性，例如计算总发料重量等
    totalFeedingWeight() {
      return this.tableData.reduce(
        (total, item) => total + item.feedingWeight,
        0
      );
    },
  },
  mounted() {
    // 组件挂载后可执行的操作，例如从接口获取表格数据等
    console.log("组件已挂载，表格数据：", this.tableData);
    // 这里可以模拟调用接口获取数据
    // this.fetchTableData();
  },
  methods: {
    // 模拟从接口获取表格数据的方法
    fetchTableData() {
      // 实际开发中这里会是调用接口的逻辑，例如使用axios等
      // 这里用setTimeout模拟异步请求
      setTimeout(() => {
        const newData = [
          {
            FachuTime: "2025-09-10",
            LLDanWei: "供应商A",
            OrderPlan: "计划001",
            product: "产品X",
            Lot: "单号001",
            TlLot: "批次1",
            XNeng: "性能A",
            DuCeng: "镀层甲",
            ProductGre: "牌号1",
            ProgPartner: "牌号1",
            PlanDate: "牌号1",
            ReqDate: "牌号1",
            Qty: "规格A",
            SendQty: 100,
            Unit: 2.5,
            OrderWT: 250,
            Statues: "个",
            IsJB: "任务1",
            status: "进行中",
            AcptTimeSD: "是",
            PredictDeliveryTime: "2025-09-08",
            ElecOutputPlan: "山东计划内容",
            MateIssTime: "山东计划内容",
            remark: "无",
            },
        ];
        this.tableData = [...this.tableData, ...newData];
      }, 1000);
    },
    // 其他方法，例如编辑表格数据等
    editTableRow(rowIndex) {
      console.log("编辑第", rowIndex, "行数据");
      // 编辑逻辑
    },
  },
};
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 500px; /* 设置表格容器高度，实现纵向滚动 */
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 表头冻结样式 */
.custom-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  position: sticky;
  top: 0;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.custom-table tr:hover {
  background-color: #e6e6e6;
}

/* 冻结前5列样式 */
.frozen-col {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 2;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
}

/* 第二列到第五列的偏移量，确保它们在第一列之后显示 */
.frozen-col:nth-child(2) {
  left: 120px;
  z-index: 3;
}

.frozen-col:nth-child(3) {
  left: 240px;
  z-index: 4;
}

.frozen-col:nth-child(4) {
  left: 360px;
  z-index: 5;
}

.frozen-col:nth-child(5) {
  left: 480px;
  z-index: 6;
}

/* 表头的冻结列需要更高的z-index */
.custom-table th.frozen-col {
  background-color: #f2f2f2;
  z-index: 7;
}

.custom-table th.frozen-col:nth-child(2) {
  z-index: 8;
}

.custom-table th.frozen-col:nth-child(3) {
  z-index: 9;
}

.custom-table th.frozen-col:nth-child(4) {
  z-index: 10;
}

.custom-table th.frozen-col:nth-child(5) {
  z-index: 11;
}
</style>